<!-- 消息页面的每一条会话的组件 -->
<template>
	<view class="status-item" @click="statusItemClick">
		<view class="avatar-box">
			<u-avatar size="68" :src="conversationItem.avatar"></u-avatar>
		</view>
		<view class="data-box">
			<view class="u-line-1" style="height: 42rpx;">{{conversationItem.lawyer_name || ' '}}</view>
			<view class="last-message u-line-1">{{conversationItem.text}}</view>
		</view>
		<view class="time-box u-rela">
			<view>{{conversationItem.last_time}}</view>
			<view class="badge">
				<u-badge v-if="!conversationItem.isEnd" :is-dot="true" :bgColor="badgeBgC[conversationItem.isNumber]" :offset="[65, 8]" ></u-badge>
				<text v-else>已结束</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"status-item",
		props: {
			// 会话数据对象
			conversationItem: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
				/* 
				 id: 1,
				 avatar: '/static/demoimg/avatar-min.png',
				 lawyer_name: '张伟',
				 text: '不客气。',		// 最后一条消息的内容
				 // 会话余额为空则已结束=> isEnd = true
				 isEnd: false,
				 // 消息已读则为灰色 0 ，消息未读则为红色 1
				 isNumber: 1,
				 last_time: 1606210001,	// 最后一条消息的时间
				 */
				// src: '../../static/demoimg/avatar-min.png',
				// 小圆点的样式
				badgeBgC:['#999999', '#FF2E2E'],
				// 是否已结束会话，true 为已结束，false 为未结束
				// isShow: false
			};
		},
		methods: {
			// 监听聊天项的点击事件
			// 这里传递的 lawyer_name 值是接收消息的用户IM的 userID
			statusItemClick() {
				this.$u.route(`/pages/views/chatting?userID=${this.conversationItem.toMessageUserID}&user_name=${this.conversationItem.lawyer_name}`);
				// this.$emit('click', this.conversationItem.lawyer_name)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status-item {
		width: 750rpx;
		height: 132rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: white;
		padding: 0 24rpx 0 106rpx;
		border-bottom: 2rpx solid #E7EAF0;
		position: relative;
		.avatar-box {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 24rpx;
		}
		.data-box {
			width: 450rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 32rpx;
			color: #141418;
			font-family: PingFang SC;
			font-weight: 500;
			
			.last-message {
				// width: 500rpx;
				color: #5F5F6B;
				font-size: 26rpx;
			}
		}
		.time-box {
			height: 50%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: #97979F;
			font-size: 24rpx;
			text-align: right;
			font-family: PingFang SC;
			font-weight: 500;
			.badge {
				display: block;
				width: 100%;
			}
		}
	}
	
</style>
